<script setup>
defineOptions({ name: 'ImageView' })
// ͼƬ�б�
defineProps({
    images: {
    type: Array,
    default: () => []
  }
})

import { ref } from 'vue'

// ʵ��������뽻��
const curIndex = ref(0)
const mouseEnterFn = (i) => curIndex.value = i
</script>


<template>
  <div class="goods-image">
    <!-- ����ͼ-->
    <div class="middle" ref="target">
      <img :src="images[curIndex]" alt="" />
    </div>
    <!-- Сͼ�б� -->
    <ul class="small">
      <li v-for="(img, i) in images" :key="i" @mouseenter="mouseEnterFn(i)" :class="{active: i === curIndex}">
        <img :src="img" alt="" />
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
.goods-image {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;

  .middle {
    width: 400px;
    height: 400px;
    background: #f5f5f5;
  }

  .large {
    position: absolute;
    top: 0;
    left: 412px;
    width: 400px;
    height: 400px;
    z-index: 500;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    // ����ͼ:���ӵĴ�С = 2:1  �������Ʊ���ͼ���ƶ���ʵ�ַŴ��Ч���鿴 background-position
    background-size: 800px 800px;
    background-color: #f8f8f8;
  }

  .layer {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.2);
    // ���Զ�λ Ȼ���������������left��top���ԾͿ����û����ƶ�����
    left: 0;
    top: 0;
    position: absolute;
  }

  .small {
    width: 80px;

    li {
      width: 68px;
      height: 68px;
      margin-left: 12px;
      margin-bottom: 15px;
      cursor: pointer;

      &:hover,
      &.active {
        border: 2px solid $xtxColor;
      }
    }
  }
}
</style>
